<template>
  <div>
    <div class="hg-gird">
      <div class="contain">
        <div class="gird-box1">
          <router-link class="listFood" v-for="img in imgs" :key="img.id" :to="{name:img.name,query:{id:img.id}}">
            <img :src=img.url alt="">
            <span>{{img.text}}</span>
          </router-link>
        </div>
        <div class="gird-box2">
          <a class="listFood" v-for="img in imgs2" :key="img.id">
            <img :src=img.url alt="">
            <span>{{img.text}}</span>
          </a>
        </div>
      </div>
      <div class="gird-footer">
        <span></span>
        <span class="right"></span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        imgs: [
          {
            name: 'listFood1',
            id: '1',
            url: 'https://cube.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '美食'
          },
          {
            name: 'listFood2',
            id: '2',
            url: 'https://cube.elemecdn.com/a/7b/b02bd836411c016935d258b300cfejpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '大牌惠吃'
          },
          {
            name: 'listFood3',
            id: '3',
            url: 'https://cube.elemecdn.com/c/7e/76a23eb90dada42528bc41499d6f8jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '商超便利'
          },
          {
            name: 'listFood4',
            id: '4',
            url: 'https://cube.elemecdn.com/0/d0/dd7c960f08cdc756b1d3ad54978fdjpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '水果'
          },
          {
            name: 'listFood5',
            id: '5',
            url: 'https://cube.elemecdn.com/7/0a/af108e256ebc9f02db599592ae655jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '医药健康'
          },
          {
            name: 'listFood6',
            id: '6',
            url: 'https://cube.elemecdn.com/3/01/c888acb2c8ba9e0c813f36ec9e90ajpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '浪漫鲜花'
          },
          {
            name: 'listFood7',
            id: '7',
            url: 'https://cube.elemecdn.com/e/58/bceb19258e3264e64fb856722c3c1jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '跑腿代购'
          },
          {
            name: 'listFood8',
            id: '8',
            url: 'https://cube.elemecdn.com/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '汉堡披萨'
          },
          {
            name: 'listFood9',
            id: '9',
            url: 'https://cube.elemecdn.com/c/21/e42997b86b232161a5a16ab813ae8jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '厨房生鲜'
          },
          {
            name: 'listFood10',
            id: '10',
            url: 'https://cube.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '甜品饮品'
          },
        ],
        imgs2: [
          {
            name: 'listFood11',
            id: '1',
            url: 'https://cube.elemecdn.com/0/1a/314b6da88ab6c7ae9828f91652d40jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '速食简餐'
          },
          {
            name: 'listFood12',
            id: '2',
            url: 'https://cube.elemecdn.com/7/d6/6f2631288a44ec177204e05cbcb93jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '地方小吃'
          },
          {
            name: 'listFood13',
            id: '3',
            url: 'https://cube.elemecdn.com/a/7b/b02bd836411c016935d258b300cfejpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '大牌惠吃'
          },
          {
            name: 'listFood14',
            id: '4',
            url: 'https://cube.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '速食简餐'
          },
          {
            name: 'listFood14',
            id: '4',
            url: 'https://cube.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '速食简餐'
          },
          {
            name: 'listFood14',
            id: '4',
            url: 'https://cube.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed',
            text: '速食简餐'
          }
        ],
        active: ''
      }
    }
  }
</script>

<style lang="less">
  .hg-gird {
    padding-top: 5.4rem;
    padding-bottom: 0.5rem;
    width: 100%;
    position: relative;

    .contain {
      width: 200%;

      .gird-box1, .gird-box2 {
        display: inline-block;
        width: 49.6%;

        .listFood {
          width: 20%;
          display: inline-block;
          height: 3.8rem;
          margin-top: 0.5rem;
          text-align: center;

          img {
            display: inline-block;
            width: 2.5rem;
            height: 2.5rem;
            padding-bottom: 0.3rem;
          }

          span {
            width: 100%;
            display: inline-block;
            font-size: 0.7rem;
            color: #666;
          }
        }
      }
    }

    .gird-footer {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 1.7rem;
      margin-left: -0.5rem;

      span {
        position: fixed;
        display: inline-block;
        width: 0.5rem;
        height: 0.08rem;
        background-color: #ccc;
      }

      .right{
        margin-left: 0.7rem;
      }
    }
  }
</style>
